<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<template>
  <main class="home">
    <div class="container">
      <h1 class="title">开发小工具集合</h1>
      <p class="subtitle">提高开发效率的实用工具</p>
      
      <div class="tools-grid">
        <div class="tool-card" @click="navigateTo('/string-tools')">
          <div class="tool-icon">🔤</div>
          <h3>字符串处理工具</h3>
          <p>批量处理字符串，添加引号、去除引号、去除空格等</p>
          <ul>
            <li>添加单引号和逗号 (SQL查询)</li>
            <li>添加双引号和逗号 (接口参数)</li>
            <li>去除单引号/双引号</li>
            <li>去除前后空格</li>
          </ul>
        </div>
        
        <div class="tool-card coming-soon">
          <div class="tool-icon">🚧</div>
          <h3>更多工具</h3>
          <p>更多实用工具正在开发中...</p>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped>
.home {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.title {
  text-align: center;
  color: white;
  font-size: 3rem;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.subtitle {
  text-align: center;
  color: rgba(255,255,255,0.9);
  font-size: 1.2rem;
  margin-bottom: 50px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.tool-card {
  background: white;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
  border-color: #667eea;
}

.tool-card.coming-soon {
  opacity: 0.6;
  cursor: not-allowed;
}

.tool-card.coming-soon:hover {
  transform: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  border-color: transparent;
}

.tool-icon {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 20px;
}

.tool-card h3 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 15px;
  text-align: center;
}

.tool-card p {
  color: #7f8c8d;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.6;
}

.tool-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tool-card li {
  color: #34495e;
  padding: 5px 0;
  position: relative;
  padding-left: 20px;
}

.tool-card li:before {
  content: "✓";
  color: #27ae60;
  font-weight: bold;
  position: absolute;
  left: 0;
}

@media (max-width: 768px) {
  .title {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .tools-grid {
    grid-template-columns: 1fr;
  }
}
</style>
